<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <NavBarVue :title="title" />
    <!-- 导航栏 end -->

    <!-- 内容 start -->
    <div class="content-top my-info">
      <van-cell-group>
        <van-field
          required
          clickable
          readonly
          size="large"
          label="面试职位"
          placeholder="请选择"
          :rules="[{ required: true, message: '请选择所属行业' }]"
          style="font-size: 16px"
          @click="show_picker_job = true"
          v-model="postData.jobname"
        />
      </van-cell-group>
      <van-popup v-model="show_picker_job" round position="bottom">
        <van-picker
          title="面试职位"
          show-toolbar
          :columns="picker_job_data"
          :default-index="picker_job_defaultIndex"
          value-key="name"
          @confirm="onPickerJobSubmit"
          @cancel="show_picker_job = false"
        />
      </van-popup>

      <van-cell-group style="margin-top: 10px">
        <van-field
          required
          readonly
          size="large"
          label="面试时间"
          placeholder="请选择"
          :rules="[{ required: true, message: '请选择面试时间' }]"
          style="font-size: 16px"
          @click="show_picker_date = true"
          v-model="postData.date"
        />
        <van-popup v-model="show_picker_date" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择面试时间"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatterDate"
            @confirm="onPickerDateSubmit"
            @cancel="show_picker_date = false"
          />
        </van-popup>

        <van-field
          required
          size="large"
          rows="1"
          label="面试地点"
          :autosize="{ maxHeight: 120, minHeight: 24 }"
          type="textarea"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写面试地点' }]"
          style="font-size: 16px"
          maxlength="50"
          v-model="postData.addr"
        />

        <van-field
          clickable
          size="large"
          label="通知内容"
          placeholder="请输入"
          :autosize="{ maxHeight: 120, minHeight: 24 }"
          type="textarea"
          :rules="[{ required: true, message: '请填写通知内容' }]"
          style="font-size: 16px"
          maxlength="800"
          v-model="postData.content"
        />
      </van-cell-group>

      <van-cell-group style="margin-top: 10px">
        <van-field
          required
          size="large"
          label="联系人"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写联系人' }]"
          style="font-size: 16px"
          maxlength="25"
          v-model="postData.linkman"
        />

        <van-field
          required
          clickable
          size="large"
          label="联系电话"
          placeholder="请输入"
          :rules="[{ required: true, message: '请填写联系电话' }]"
          style="font-size: 16px"
          type="tel"
          maxlength="50"
          v-model="postData.tel"
        />

        <van-cell
          required
          size="large"
          center
          title="短信通知"
          style="color: #646566"
          :value="postData.phone"
        >
          <template #right-icon>
            <van-switch
              v-model="postData.isSendSms"
              size="24"
              style="margin-left: 20px"
            />
          </template>
        </van-cell>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button
          type="primary"
          block
          color="#07f"
          round
          style="font-size: 18px"
          text="发送"
          :disabled="disbale_submit"
          :loading="loading_submit"
          @click="onSubmit"
        ></van-button>
      </div>
    </div>
    <!-- 内容 end -->
  </div>
</template>

<script>
import {
  Cell,
  CellGroup,
  Field,
  Switch,
  Picker,
  Popup,
  Button,
  Dialog,
  Toast,
  DatetimePicker,
} from "vant";
import {
  CompanyJobGetMyJobs,
  CompanyGetCompanyInfo,
  CompanyResumeGetInterviewJobid,
  CompanyGetCompanyName,
  CompanyResumeSendInterviewNotice,
} from "@/util/http";
import NavBarVue from "@/components/NavBar.vue";
import { mixin_validate } from "@/mixin/mixins";
import Global from "@/Global";
export default {
  name: "InterView",
  components: {
    NavBarVue,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Switch.name]: Switch,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
  },
  props: ["title", "resumeid", "rowid", "phone"],
  mixins: [mixin_validate],
  mounted() {
    CompanyJobGetMyJobs(1, "1").then((res) => {
      //   console.log(res);
      if (res.length === 0) {
        Dialog.confirm({
          message: "检测到还未发布职位，无法发送面试通知",
          confirmButtonText: "退出",
        })
          .then(() => {
            this.$router.go(-1);
          })
          .catch(() => {
            // on cancel
            this.$router.go(-1);
          });
      }
      res.forEach((item) => {
        this.picker_job_data.push({
          id: item.jobid,
          name: item.jobName,
        });
      });
      if (this.rowid != 0) {
        CompanyResumeGetInterviewJobid(this.rowid).then((res2) => {
          this.apply_jobid = res2;
        });
      }
    });

    CompanyGetCompanyInfo().then((res) => {
      //   console.log(res);
      if (res != null) {
        if (res.Address != null) {
          this.postData.addr = res.Address;
        }
        if (res.LinkMan != null) {
          this.postData.linkman = res.LinkMan;
        }
        if (res.Tel != null) {
          this.postData.tel = res.Tel;
        }
      }
    });

    CompanyGetCompanyName().then((res) => {
      //   console.log(res);
      this.postData.companyid = res.companyid;
      this.postData.companyname = res.name;
    });
  },
  // 定义属性
  data() {
    return {
      postData: {
        companyid: "",
        companyname: "",
        resumeid: this.resumeid,
        jobid: "",
        jobname: "",
        date: "",
        addr: "",
        content: "",
        linkman: "",
        tel: "",
        phone: this.phone,
        isSendSms: true,
      },
      show_picker_job: false,
      picker_job_data: [],
      picker_job_defaultIndex: 0,

      show_picker_date: false,
      minDate: new Date(),
      maxDate: new Date(new Date().getFullYear() + 1, 12, 31),
      currentDate: new Date(),

      apply_jobid: "",
      loading_submit: false,
    };
  },
  computed: {
    disbale_submit() {
      if (
        this.postData.jobid.trim().length > 0 &&
        this.postData.jobname.trim().length > 0 &&
        this.postData.date.trim().length > 0 &&
        this.postData.addr.trim().length > 0 &&
        this.postData.linkman.trim().length > 0 &&
        this.postData.tel.trim().length > 0
      )
        return false;
      return true;
    },
  },
  watch: {
    apply_jobid(val) {
      if (val === "") return;
      let list = this.picker_job_data;
      if (list.length === 0) return;

      let index = -1;
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if (item.id === val) {
          index = i;
          break;
        }
      }
      if (index >= 0) {
        this.picker_job_defaultIndex = index;
        let item = list[index];
        this.postData.jobid = item.id;
        this.postData.jobname = item.name;
      }
    },
  },
  // 方法集合
  methods: {
    formatterDate(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return val + "日";
      }
      return val;
    },
    onPickerJobSubmit(item, index) {
      //   console.log(item, index);
      this.picker_job_defaultIndex = index;
      this.show_picker_job = false;
      this.postData.jobid = item.id;
      this.postData.jobname = item.name;
    },
    onPickerDateSubmit(value) {
      //   console.log(this.$dayjs(value).format("YYYY-MM-DD HH:mm"));
      this.show_picker_date = false;
      this.postData.date = this.$dayjs(value).format("YYYY-MM-DD HH:mm");
    },
    onSubmit() {
      if (!this.validate_phoneOrTel.test(this.postData.tel)) {
        Toast("联系电话格式不正确");
        return;
      }
      this.loading_submit = true;
      CompanyResumeSendInterviewNotice(this.postData).then((res) => {
        Toast(res.msg);
        if (res.result === 1) {
          setTimeout(() => {
            this.$router.go(-1);
          }, Global.setTimeout_time);
        }
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
</style>
